<template>
  <div :class="$style.wrap">
    <Button type="primary" @click="visibleHandle">{{ text }}</Button>
    <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" @close="resetForm" @opened="initData">
      <FormContainer :column="2">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="paramCode" label="参数代码">
            <el-input v-model="formData.paramCode" placeholder="请输入参数代码" clearable></el-input>
          </el-form-item>
          <el-form-item prop="paramName" label="参数名称">
            <el-input v-model.trim="formData.paramName" placeholder="请输入参数名称" clearable></el-input>
          </el-form-item>
          <el-form-item prop="maintainFlag" label="维护标识">
            <el-select v-model="formData.maintainFlag" placeholder="请选择维护标识" clearable filterable>
              <el-option v-for="d in paramsFlagList" :key="d.dictCode" :value="d.dictCode" :label="d.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="paramValue" label="参数值">
            <el-input v-model.trim="formData.paramValue" placeholder="请输入参数值" clearable></el-input>
          </el-form-item>
          <el-form-item prop="paramDesc" label="参数说明" :span="24">
            <el-input v-model="formData.paramDesc" type="textarea" :autosize="{minRows:4}" placeholder="请输入参数说明"></el-input>
          </el-form-item>
          <el-form-item :span="24">
            <div class="button-container" style="padding-top:0;">
              <Button type="primary" @click="visible=false">取消</Button>
              <Button type="primary" @click="submitHandle">确定</Button>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { postSystemParam, putSystemParam } from '@/api/ivrParam'
import { deepCopy, numToString } from '@/utils'
export default {
  name: 'AddEdit',
  components: {
    FormContainer
  },
  props: {
    title: {
      type: String,
      default: '添加'
    },
    text: {
      type: String,
      default: '新增'
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    paramsFlagList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorParamCode = (r, v, c) => {
      if (/^[A-Z_]+$/.test(v)) {
        c()
      } else {
        c(new Error('参数编码只能是大写字母和下划线！'))
      }
    }
    // const validatorParamValue = (r, v, c) => {
    //   if (/^[\d_]+$/.test(v)) {
    //     c()
    //   } else {
    //     c(new Error('参数值只能是数字和下划线！'))
    //   }
    // }
    return {
      visible: false,
      formData: {
        // createBy: '', // 新增操作人
        // lastUpdateBy: '',	// 更新操作人
        maintainFlag: '', // 维护标识1可维护2不可删除3不可修改4不可维护
        paramCode: '', // 参数编码
        paramDesc: '', // 参数说明
        paramName: '', //	参数名称
        paramValue: ''// 参数值
      },
      formRules: {
        maintainFlag: [
          { required: true, message: '请选择维护标识', trugger: 'change' }
        ], // 维护标识1可维护2不可删除3不可修改4不可维护
        paramCode: [
          { required: true, message: '请输入参数代码', trugger: 'change' },
          { required: true, validator: validatorParamCode, trugger: 'change' }
        ], // 参数编码
        paramDesc: [
          { required: true, message: '请输入参数说明', trugger: 'change' }
        ], // 参数说明
        paramName: [
          { required: true, message: '请输入参数名称', trugger: 'change' }
        ], //	参数名称
        paramValue: [
          { required: true, message: '请输入参数值', trugger: 'change' }
          // { required: true, validator: validatorParamValue, trugger: 'change' }
        ]// 参数值
      }
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    // 判断能否处理该条数据
    visibleHandle() {
      if (this.isEdit) {
        if (this.data.length !== 1) {
          this.$message.error('请选择要编辑的数据！')
          return
        }
        if (this.disabled) {
          this.$message.error('您不能编辑该条数据！')
          return
        }
      }
      this.visible = true
    },
    // 提交数据
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        if (!this.isEdit) {
          return postSystemParam(data).then(res => {
            this.$message.success('新增成功！')
            this.visible = false
            this.$emit('refresh')
          })
        } else {
          data.id = this.data[0].id
          return putSystemParam(data).then(res => {
            this.$message.success('修改成功！')
            this.visible = false
            this.$emit('refresh')
          })
        }
      })
    },
    initData() {
      this.resetForm()
      if (this.isEdit) {
        for (const key of Object.keys(this.formData)) {
          this.$set(this.formData, key, numToString(this.data[0][key]))
        }
      }
    },
    // 重置
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang='scss' module>
.wrap{

}
</style>
